<template>
	<view class="classification">
		<statusBar />
		<view class="nav" @tap="leftIndex">
			<image src="../../static/setup/jiantou.png" mode=""></image>
			<view>商品-管理分类</view>
		</view>
		<view class="search">
			<view class="search_one">
				<view class="goods">
					<view>
						<view>特惠商品</view>
						<view>ID: 8</view>
					</view>
					<view v-if="settingTop" class="Placed" @tap="goodsDate">设置</view>
					<view v-if="PlacedTop" class="Placed_one">
						<view>置顶</view>
						<view><image src="../../static/management/paixuu.png" mode=""></image></view>
					</view>
				</view>
				<view class="setting">
					<view class="goods_one">
						<view @click="boxshow = !boxshow">
							<view>展开</view>
							<!-- <view></view> -->
						</view>
						<view>
							<view>特惠商品</view>
							<view>ID: 8</view>
						</view>
						<view v-if="settingTop" class="Placed" @tap="goodsDate">设置</view>
						<view v-if="PlacedTop" class="Placed_one">
							<view>置顶</view>
							<view><image src="../../static/management/paixuu.png" mode=""></image></view>
						</view>
					</view>
					<!-- 展开的 -->
					<view class="goods_two">
						<transition name="draw">
							<!--这里的name 和 css 类名第一个字段要一样-->
							<view class="box" v-show="boxshow">
								<view>
									<view>特惠商品</view>
									<view>ID: 8</view>
								</view>
								<view v-if="settingTop" class="Placed" @tap="goodsDate">设置</view>
								<view v-if="PlacedTop" class="Placed_one">
									<view>置顶</view>
									<view><image src="../../static/management/paixuu.png" mode=""></image></view>
								</view>
							</view>
						</transition>
					</view>
				</view>
			</view>
		</view>
		<!-- 保存 -->
		<view v-if="settingTop" class="new">
			<view @tap="Editing">新建分类</view>
			<view @tap="Sorting">排序设置</view>
		</view>
		<!-- 排序保存设置 -->
		<view v-if="PlacedTop" class="new1" @tap="Save"><view>保存设置</view></view>

		<!-- 设置弹出层 -->
		<view class="menu">
			<u-popup v-model="Packup" mode="bottom">
				<view class="Foodsold">
					<view>
						<view @tap="Editing">编辑</view>
						<view>新增二级分类</view>
						<view>删除分类</view>
					</view>
					<view>取消</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>
<script>
import statusBar from '../../components/statusBar/statusBar.vue';
export default {
	data() {
		return {
			itemList: [
				{
					head: '赏识在于角度的转换',
					body: '只要我们正确择取一个合适的参照物乃至稍降一格去看待他人，值得赏识的东西便会扑面而来'
				}
			],
			accordion: true,
			arrow: true,
			boxshow: false, //展开
			show: false,
			Packup: false, //设置
			PlacedTop: false,
			settingTop: true
		};
	},
	components: {
		statusBar
	},
	methods: {
		leftIndex() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 设置弹出层
		goodsDate() {
			this.Packup = true;
		},
		itemChange(e) {
			console.log(e);
			this.show = !this.show;
		},
		// 排序
		Sorting() {
			this.settingTop = false;
			this.PlacedTop = true;
		},
		// 保存设置
		Save() {
			this.settingTop = true;
			this.PlacedTop = false;
		},
		// 编辑
		Editing(){
			uni.navigateTo({
				url:"/pages/Management/Editing"
			})
		},
		change(index) {}
	}
};
</script>
<style lang="scss" scoped>
	@import './scss/classification.scss';

</style>
